<template>
	<view class="main">
		<u-navbar :is-back="true" :title="i18n.navbar.register" :background="background" :border-bottom="false"
			title-color="#000000" back-icon-color="#000"></u-navbar>
		<view class="all">
			<view class="inputs">
				<text>{{i18n.register.shopname}}</text>
				<input type="text" :placeholder="i18n.register.input.shopname" v-model="shopname" />
			</view>
			<view class="inputs">
				<text>{{i18n.register.username}}</text>
				<input type="text" :placeholder="i18n.register.input.username" v-model="username" />
			</view>
			<view class="inputs">
				<text>{{i18n.register.email}}</text>
				<input type="text" :placeholder="i18n.register.input.email" v-model="email" />
			</view>
			<view class="inputs2">
				<view class="input_l">
					<text>{{i18n.register.code}}</text>
					<input type="text" :placeholder="i18n.register.input.code" v-model="code" />
				</view>
				<view class="input_r" @click="getCode">
					{{tips==''?i18n.register.getcode:tips}}
				</view>
			</view>

			<view class="inputs3">
				<view class="input_l">
					<text>{{i18n.register.class}}</text>
					<text @click="selectclass(1)" class="selectype">{{txt==''?i18n.register.input.class:txt}}</text>
				</view>
				<view class="input_r">
					<image src="../../../static/images/right.png" mode=""></image>
				</view>
			</view>
			<view class="inputs3">
				<view class="input_l">
					<text>{{i18n.register.type}}</text>
					<text class="selectype" @click="selectclass(2)">{{txt2==''?i18n.register.input.type:txt2}}</text>
				</view>
				<view class="input_r">
					<image src="../../../static/images/right.png" mode=""></image>
				</view>
			</view>
			<view class="inputs">
				<text>{{i18n.register.address}}</text>
				<input type="text" :placeholder="i18n.register.input.address" v-model="address" />
			</view>
			<view class="inputs">
				<text>{{i18n.register.phone}}</text>
				<input type="text" :placeholder="i18n.register.input.phone" v-model="phone" />
			</view>
			<view class="inputs">
				<text>{{i18n.register.keywords}}</text>
				<input type="text" :placeholder="i18n.register.input.keywords" v-model="keywords" />
			</view>
			<view class="inputs">
				<text>{{i18n.register.invitation_code}}</text>
				<input type="text" :placeholder="i18n.register.input.invitation_code" v-model="invitation_code" />
			</view>
			<view class="bottom">
				<view class="hint">
					{{i18n.register.hint}}
				</view>
				<view class="imghint">
					{{i18n.register.scope}}
				</view>
				<view class="upimg" @click="upimg">
					<image v-for="(item,index) in upurl" :key="index" :src="item" mode="aspectFill"></image>
					<text v-if="upurl.length<5">{{i18n.register.upimg}}</text>
				</view>
				<view class="protocol">
					<image src="../../../static/images/select.png" mode="" v-if="protocol" @click="changepro"></image>
					<image src="../../../static/images/selected.png" mode="" v-if="!protocol" @click="changepro">
					</image>
					<text>{{i18n.register.agree}}<text class="goprotocol">{{i18n.register.protocol}}</text></text>
				</view>
			</view>

		</view>
		<view class="sub" @click="register">
			{{i18n.register.submit}}
		</view>
		<u-select v-model="show" :list="types==1?clsslist:typelist" @confirm="confirm" label-name="name"
			value-name="id"></u-select>
		<u-toast ref="uToast"></u-toast>
		<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange" :change-text="i18n.register.codeagin"
			:start-text="i18n.register.getcode">
		</u-verification-code>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff',
				},
				protocol: true,
				show: false,
				clsslist: [],
				typelist: [],
				txt: '',
				txt2: '',
				types: '',
				tips: '',
				// refCode: null,
				seconds: 10,
				email: '',
				shopname: '',
				username: '',
				phone: '',
				code: '',
				keywords: '',
				invitation_code: '',
				upurl: [],
				txtid: '',
				txt2id: '',
				address: ''
			};
		},
		computed: {
			i18n() {
				return this.$t('message')
			},
		},
		onShow() {
			this.lang()
		},
		onLoad() {
			//获取商户分类列表
			this.getcatefory()
			this.getctype()
		},
		methods: {
			selectclass(index) {
				this.types = index
				this.show = true
			},
			lang() {
				this._i18n.locale = uni.getStorageSync('select')
			},
			changepro() {
				this.protocol = !this.protocol
				console.log(this.protocol);
			},


			// /api/admin/merchant/all/category/list获取全部商户分类列表
			getcatefory() {
				global.$http.request({
					url: '/api/admin/merchant/all/category/list',
					method: 'GET',
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data);
						this.clsslist = res.data.data
						console.log(this.clsslist);
					}
				})
			},
			// /api/admin/merchant/all/category/list获取全部商户类型列表
			getctype() {
				global.$http.request({
					url: '/api/admin/merchant/all/type/list',
					method: 'GET',
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data);
						this.typelist = res.data.data
						console.log(this.clsslist);
					}
				})
			},
			//选择类型确认
			confirm(e) {
				console.log(e);
				if (this.types == 1) {
					this.txt = e[0].label
					this.txtid = e[0].value
				} else if (this.types == 2) {
					this.txt2 = e[0].label
					this.txt2id = e[0].value
				}
			},
			//验证码
			codeChange(text) {
				this.tips = text;
			},

			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.sendemail()
						this.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			register() {
				if (this.shopname == '' || this.username == '' || this.code == '' || this.email ==
					'' || this.txtid == '' || this.txt2id == '' || this.upurl == '' || this.address == '') {
					uni.showToast({
						title: '请将信息填写完整',
						icon: 'none',
						duration: 1000
					})
				} else if (this.protocol) {
					uni.showToast({
						title: '请勾选下方协议',
						icon: 'none',
						duration: 1000
					})
				} else {
					global.$http.request({
						url: '/api/admin/merchant/settled/apply',
						data: {
							name: this.shopname,
							realName: this.username,
							phone: this.phone,
							captcha: this.code,
							address: this.address,
							email: this.email,
							categoryId: this.txtid,
							typeId: this.txt2id,
							keywords: this.keywords,
							invitationCodes: this.invitation_code,
							qualificationPicture: this.upurl,
						}
					}).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: '提交成功,审核通过后请查看邮箱',
								icon: 'none',
								duration: 1000
							})
						}
					})
				}
			},

			//上传图片
			upimg() {
				var that = this
				uni.chooseImage({
					count: 5,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						global.$http.upload('/api/admin/merchant/upload/image', {
							params: {
								model: 'user',
								pid: '0'
							},
							/* 会加在url上 */
							filePath: tempFilePaths[0], // 要上传文件资源的路径。
							name: 'multipart', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
							formData: {}, // HTTP 请求中其他额外的 form data
						}).then(res => {
							console.log(res);
							console.log(res.data.data.url);
							this.upurl.push(res.data.data.url)
							// this.upurl = res.data.data.url
						})
					}
				});
			},
			//发送邮箱验证码
			sendemail() {
				global.$http.request({
					url: '/api/admin/merchant/email/merchant/settled',
					data: this.email
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data);
					}
				})
			},


		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;

		.main {
			width: 750rpx;
			height: 100%;

			.all {
				margin-top: 10rpx;

				.inputs {
					margin-bottom: 2rpx;
					background-color: #fff;
					display: flex;
					align-items: center;
					padding: 35rpx 31rpx;

					text {
						display: block;
						width: 180rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					input {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
					}

				}

				.inputs2 {
					margin-bottom: 2rpx;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 35rpx 31rpx;

					.input_l {
						display: flex;
						align-items: center;

						text {
							display: block;
							width: 180rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						input {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
						}

						.selectype {
							width: 53%;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #B2B2B2;
						}
					}

					.input_r {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FE0000;

						image {
							width: 8rpx;
							height: 12rpx;
						}
					}
				}

				.inputs3 {
					width: 100%;
					margin-bottom: 2rpx;
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 35rpx 31rpx;

					.input_l {
						width: 100%;
						display: flex;
						align-items: center;

						text {
							display: block;
							width: 180rpx;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #333333;
						}

						input {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
						}

						.selectype {
							width: 76%;
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #B2B2B2;
						}
					}

					.input_r {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #FE0000;

						image {
							width: 8rpx;
							height: 12rpx;
						}
					}
				}

				.bottom {
					padding: 19rpx 30rpx;

					.hint {
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #333333;
					}

					.imghint {
						padding-top: 15rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
					}

					.upimg {
						margin: 29rpx 0 39rpx 0;
						display: flex;
						align-items: center;
						flex-wrap: wrap;

						image {
							margin: 0 10rpx 10rpx 0;
							height: 150rpx;
							width: 150rpx;
						}

						text {
							margin-bottom: 10rpx;
							display: block;
							width: 150rpx;
							text-align: center;
							line-height: 150rpx;
							height: 150rpx;
							background: #FFFFFF;
							border: 1rpx solid #B3B3B3;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #B2B2B2;
						}
					}

					.protocol {
						display: flex;
						align-items: center;

						image {
							width: 30rpx;
							height: 30rpx;
						}

						text {
							padding-left: 14rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #999999;

							.goprotocol {
								color: #333333;
							}
						}
					}
				}
			}

			.sub {
				margin-top: 50rpx;
				width: 750rpx;
				height: 98rpx;
				line-height: 98rpx;
				text-align: center;
				background: #304156;

				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
